<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">
/*<![CDATA[*/
		body {
			font-size: small;
			font-family: Verdana,Arial,sans-serif;
			background-color: #ccc;
		}
		#container {
			background-color: #fff;
			width: 950px;
			margin-right: auto;
			margin-left: auto;
			margin-top: 10px;
			margin-bottom: 20px;
			padding: 20px;
		}
		ul.entries {
			margin-top: 5px;
			margin-bottom: 20px;
		}
		ul.entries li {
			line-height: 1.2em;
			margin-top: .5em;
			list-style: none;
		}
		ul.entries span.updated {
			font-size: 0.7em;
			color: #888;
		}
		table.am {
			margin-top: 5px;
			margin-bottom: 10px;
			border-spacing: .75em;
			/*margin-left: auto;
			margin-right: auto;*/
		}
		table.am th{
			vertical-align: bottom;
			font-weight: normal;
			border-bottom: 1px solid black;
			width: 27%;
		}
		table.am th.author {
			width: 19%;
		}
		table.am td{
			text-align: left;
			vertical-align: top;
			width: 27%;
		}
		table.am td.author {
			text-align: left;
			width: 19%;
		}
		h1, h2, h3 {
			margin-top: 10px;
			margin-bottom: 5px;
			font-style: normal;
			font-weight: normal;
		}
		h3 {
			margin-top: 5px;
			font-size: 1.1em;
		}
		h2 {
			font-size: 1.5em;
		}
		h1 {
			font-size: 1.7em;
		}
		.invalid, .errorMessage {
			background-color: #FCC;
		}
		.errorMessage {
			font-weight: bold;
			line-height:;
		}
		.ingroup {
			color: rgb(204,102,0);
			font-weight: bold;
		}
		.count {
			display: block;
			float: left;
			font-size: 1.5em;
			color: #777;
			padding-right: .5em;
			padding-bottom: .25em;
		}
		.sorting_asc {
			background: url('media/sort_asc.png') no-repeat center right;
		}

		.sorting_desc {
			background: url('media/sort_desc.png') no-repeat center right;
		}

		.sorting {
			background: url('media/sort_both.png') no-repeat center right;
		}
		.partBlurb {
			margin-top: .5em;
			margin-bottom: .5em;
		}
		/*]]>*/
		</style>
		<title>
			Web Marketing Buzz Networks
		</title>
	</head>
	<body>
		<div id="container">
			<h1>
				Web Marketing Buzz Networks as of {{dateRun|date:"H:i:s, F j, Y"}}
			</h1>
			<p>
				This table shows the buzz networks for <span class="ingroup">participants</span> in <a href="http://AlgorithmicAdvertising.com/">Eastern Michigan University's Search Marketing and Landing Page Optimization Students, Fall 2010</a>. <span class='ingroup'>Bud Gibson</span> is the professor leading the program. Everyone else is a <span class='ingroup'>student</span>. A goal of online networking is to enrich <span class='ingroup'>students'</span> learning experience. <span class='ingroup'>Students</span> are using Buzz for this purpose.
			</p>
			<p>
				In its current form, Google Buzz presents two challenges for class interaction:
			</p>
			<ul>
				<li>There is not an easy way to track participants' output so you don't miss important updates from individuals. To solve that issue, I <a href="http://www.google.com/buzz/fpgibson/WAwtSuDKMf2/Ive-succeeded-in-creating-a-buzz-group-that-I-can" title="Buzz by Bud Gibson">used Google Reader to aggregate the output of all participants</a> in one easy to track <a href="http://www.google.com/reader/shared/user/07451921867171953042/label/Buzz%20Fall%202010" title="Google Reader - &quot;Buzz Fall 2010&quot; via Bud">web page</a>. Users of Google Reader, can <a href="https://www.google.com/reader/bundle/user/07451921867171953042/bundle/Search%20Marketing%20Student%20Buzz%20Fall%202010">subscribe to the aggregate bundle of participants here</a>.</li>
				<li>There is not an easy way to know who is in the group or see how the group members are connecting with each other. The table below aims to solve this issue. It updates every five minutes. Future plans include incorporating a summary of each participant's output in the table. The open source software for creating this table is located <a href="http://code.google.com/p/buzz-list-tracker/" title="buzz-list-tracker - Project Hosting on Google Code">here</a>.</li>
			</ul> 
			<table class='am' id='participants'>
				<thead>
					<tr>
						<th class='author'>
							Participant
						</th>
						<th>
							Mutually Following
						</th>
						<th>
							Not Following Participant Back
						</th>
						<th>
							Participant's Other Followers
						</th>
					</tr>
				</thead>
				<tbody>
					{% for participant in participants %}
					<tr>
						<td class="author">
							<span class='ingroup'>{{participant.displayName}}</span>
							<p class='partBlurb'>
								<img src='{{participant.thumbnailUrl}}' alt='{{participant.displayName}}' />
							</p>
							<p class='partBlurb'>
								<a target="_blank" title="Follow on Google Buzz" class="google-buzz-button" href="{{participant.profileUrl}}" data-button-style="follow">Follow on Buzz</a>
							</p>
						</td>
						<td>
							<span class='count' title='{{participant.mutual_count}}'>{{participant.mutual_count}}</span> {% for prs in participant.mutual %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
						<td>
							<span class='count' title='{{participant.unreciprocated_count}}'>{{participant.unreciprocated_count}}</span> {% for prs in participant.unreciprocated %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
						<td>
							<span class='count' title='{{participant.otherFollowers_count}}'>{{participant.otherFollowers_count}}</span> {% for prs in participant.otherFollowers %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"> </script>		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
		<script type="text/javascript" src="media/jquery.dataTables.min.js"> </script>
		<script type="text/javascript">
		jQuery.fn.dataTableExt.oSort['title-numeric-asc']  = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ? -1 : ((x > y) ?  1 : 0));
		};
		jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ?  1 : ((x > y) ? -1 : 0));
		};
		$(document).ready(function() {
			$('#participants').dataTable({
					"bPaginate": false,
					"bLengthChange": false,
					"bFilter": false,
					"bSort": true,
					"bInfo": false,
					"bAutoWidth": false, 
					"aoColumns": [
								null,
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" }
							]});
		});
		</script>
	</body>
</html>
